<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
	<style type="text/css">
		li{
			text-indent: 3em;
		}
	</style>
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div>
				<h4>工厂函数</h4>
				<pre>
	function creataPerson(name,age,job){
		//创建一个对象person
		var person={};	//创建对象的语法糖	等价 var person=new Object();
		var person=new Object();
		//将传进来的name,age,job的值赋值给person的name,age,job属性
		person.name=name,
		person.age=age,
		person.job=job;
		person.sayName=function(){
			alert(this.name);
		}
		return person;
	}
	var a=creataPerson("安妮",10,"法师");
	console.log(a);
	a.sayName();				
				</pre>
				<p>工厂模式:通过定义一个函数,通过传参的方式,创建不同的对象。缺点，无法识别构造函数。
				因为没有使用 new 实例化一个新对象,没法检测对象是由谁实例化出来的</p>
			</div>
			<div>
				<h4>instanceof 操作符</h4>
				<pre>
	检测对象是由谁实例化出来的				
	var obj=new Object()
	var arr=[];
	console.log(obj instanceof Object); //true
	console.log(arr instanceof Array);  //true
	console.log(arr instanceof Function);  //false
	console.log(a instanceof creataPerson);  //false
	console.log(a instanceof Object);  //true
				</pre>
			</div>
			<div>
				<h4>构造函数</h4>
				<pre>
	function CreatePerson(name,age,job){
		//使用关键字this
		this.name=name,
		this.age=age,
		this.job=job;
		this.sayName=function(){
			alert(this.name);
		}
	}
	var p=new CreatePerson("流浪法师",80,"法坛");
	var timo=new CreatePerson("提莫",8,"提款机");
	console.log("p instanceof CreatePerson",p instanceof CreatePerson);//true
	console.log("timo instanceof CreatePerson",timo instanceof CreatePerson);//true
	console.log("p.sayName==timo.sayName",p.sayName==timo.sayName);//false				
				</pre>
				<ul>
					<li>1.没有显示创建一个对象</li>
					<li>2.将属性和方法赋值给 this 对象</li>
					<li>3.没有使用 return 关键字</li>
					<li>4.使用 new 关键字实例化对象</li>
				</ul>
				<div>构造函数的缺点,虽然 解决了对象识别的问题,但是构造函数体内的方法不是来自同一个对象</div>
				<div>new 操作符具体做了什么事</div>
				<ul>
					<li>1.创建了一个新的对象</li>
					<li>2.将构造函数的作用域赋值给新对象(this 指向新对象)</li>
					<li>3.执行构造函数里面的代码(构造函数里的属性和方法拷贝到新对象中)</li>
					<li>4.返回新对象</li>
				</ul>
			</div>
			<div>
				<h4>原型模式</h4>
				<pre>
	function Create(name,age,job){
		this.name=name
		this.age=age,
		this.job=job;
	}
	每次命名构造函数,其含有  prototype属性
	指向构造函数的原型对象,这个原型对象中有 constrcutor属性指向构造函数
	Create构造函数的原型对象:Create.prototype	
	Create.prototype.sayName=function(){
		alert(this.name)
	}			
	var yx1=new Create("原型1号",1,"测试");
	var yx2=new Create("原型2号",2,"量产");
	console.log(yx1.sayname===yx2.sayname);//true
	console.log(Create.prototype.toString.call(yx1.age));	//[object Number]
				</pre>
				<div>原型模型解决了"实例化对象中方法来自不同对象"的问题</div>
			</div>
			<div>
				<h4>原型链</h4>
				<pre>
	var M = function(name){
		this.name = name
	}
	var o3 = new M('o3')
	
	o3.__proto__ === M.prototype  //true
	o3.prototype   //undefined
	o3.__proto__ === M.prototype //true
	 
	o3实例本身并无constructor，不过会借助原型链向上查找
	o3.constructor === M.prototype.constructor  // true
	o3.constructor === M //true
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
</body>

</html>